<template>
  <div class="box">
    <div class="top">
      <div>
        <span class="title">{{ dataSource.templateName }}</span>
        <span v-if="isDefault" class="default">默认</span>
      </div>
      <a-dropdown>
        <a-icon type="ellipsis" style="cursor: pointer" />
        <a-menu slot="overlay">
          <a-menu-item v-if="permissions_dycl.includes('dycl:dycl.dyclTemplate:update')" key="edit" @click="goEdit(dataSource.id)"
            >编辑</a-menu-item
          >
          <a-menu-item v-if="permissions_dycl.includes('dycl:dycl.dyclTemplate:copy')" key="copy" @click="copyItem(dataSource.id)"
            >复制</a-menu-item
          >
          <a-menu-item
            v-if="!isDefault && permissions_dycl.includes('dycl:dycl.dyclTemplate:delete')"
            key="del"
            @click="delItem(dataSource.id)"
            >删除</a-menu-item
          >
        </a-menu>
      </a-dropdown>
    </div>
    <div class="item">
      <span class="title">编辑人：</span>
      <span class="content">{{ dataSource.modifiedUserName }}</span>
    </div>
    <div class="item">
      <span class="title">编辑时间：</span>
      <span class="content">{{ formatDate(dataSource.gmtModified) }}</span>
    </div>
    <div class="item event">
      <span class="title">事件类型：</span>
      <span class="content">{{ dataSource.eventType }}</span>
    </div>
  </div>
</template>
<script>
import { existsNotFinishReq, delTemplateReq, copyTemplateReq } from "../templates/api";
import { mapGetters } from "vuex";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    dataSource: {
      type: Object,
      default: () => {}
    },
    isDefault: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["permissions_dycl"])
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    copyItem(id) {
      copyTemplateReq(id)
        .then((res) => {
          if (res && res.code === 200) {
            this.$message.success("复制成功");
            this.$emit("reload");
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    delItem(id) {
      existsNotFinishReq(id).then((res) => {
        if (res && res.code === 200) {
          if (res.data) {
            this.$message.warning("模板正在使用中，不能删除！");
          } else {
            this.$confirm({
              title: "模板删除确认",
              content: "确认要删除模板吗",
              onOk: () => {
                delTemplateReq(id)
                  .then((res) => {
                    if (res && res.code === 200) {
                      this.$message.success("删除成功！");
                      this.$emit("reload");
                    } else {
                      this.$message.error("删除失败！");
                    }
                  })
                  .catch((err) => {
                    this.$message.error("删除失败！");
                    console.log(err);
                  });
              }
            });
          }
        }
      });
    },
    goEdit(id) {
      this.$router.push({
        path: `/daiyuchuli/templates/${id}/edit`
      });
    },
    formatDate(stamp) {
      if (stamp) {
        const date = new Date(stamp);
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
      }
      return "--";
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  padding: 16px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  margin-bottom: 24px;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  .title {
    font-size: 16px;
    color: rgba(60, 61, 67, 1);
    font-weight: 500;
  }
  .default {
    font-size: 12px;
    padding: 0px 5px;
    border: 1px solid rgba(50, 204, 170, 1);
    color: rgba(50, 204, 170, 1);
    margin-left: 4px;
  }
}
.item {
  margin-top: 8px;
  .title {
    width: 50px;
    color: rgba(118, 120, 133, 1);
  }
  .content {
    color: rgba(85, 86, 93, 1);
  }
  &.event {
    .title {
      color: red;
    }
    .content {
      color: red;
    }
  }
}
</style>
